<template>
  <el-row>
    <el-col  v-for="ele in myStore.$state.source" :key=ele.id  :span="8" > <!-- 循环获取的数据 -->
      <el-card :body-style="{padding:'0px'}" shadow="always">
        <template #header > <!-- 标题 -->
          <div class="head">
            <span class="center">{{ele.tableName}}</span>
          </div>
        </template>
        <div v-if="ele.timeout!=null" class="timeout">
            <p>数据长时间未更新</p>
            <p><span>上次更新时间为：</span><span>{{ele.timeout}}</span></p>
        </div>
        <div v-if="ele.timeout==null"> <!-- 主体内容 -->
             <el-progress type="dashboard" :percentage=ele.source.cpuPer :status="getStatus(ele.source.cpuPer)">
              <template #default>
                <p class="percentage-label">CPU</p>
                <p class="percentage-label">{{ele.source.cpuPer}}%</p>
              </template>
            </el-progress>
            <el-progress type="dashboard" :percentage=ele.source.memPer :status="getStatus(ele.source.memPer)">
              <template #default>
                <p class="percentage-label">内存</p>
                <p class="percentage-label">{{ele.source.memPer}}%</p>
              </template>
            </el-progress>
            <div v-for="(value,key) in ele.source.diskPerList" :key="key">
              <el-progress style="padding-bottom: 10px;" :text-inside="true" :stroke-width="20" :percentage=value
                :status="getStatus(value)">
                <span>{{key+'盘'}}</span>
              </el-progress>
            </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  import { dealSource } from "~/service/api/source"
  import { useSourceStore } from "~/store/index";

  const myStore = useSourceStore(); // 获取全局变量对象

  dealSource() // 首次启动程序获取数据初始化

  setInterval(dealSource, 10000) // 此后每10秒更新一次数据

  // 根据 使用率改变status，这样会有不同的颜色。
  function getStatus(percentage:number) {
    if (percentage < 50) {
      return "success"
    } else if (percentage >= 50 && percentage < 80) {
      return "warning"
    } else if (percentage >= 80) {
      return "exception"
    }
  }

</script>

<style>
  /* 这个样式能够让同一行的卡片保持同样大小 */
  .el-card{
    min-width: 100%;
    height: 100%; 
  }
  .head{
    font-size: 20px;
    font-family:"微软雅黑";
  }
  .center {
    margin-left: 1px;
  }

  .timeout{
    font-size: 30px;
    font-family:"微软雅黑";
    color: red;
  }

  .right {
    float: right;
    color: red;
  }
</style>